<template>
  <!-- 新增/修改菜单的弹窗 -->
  <el-drawer :title="dialogTitle" v-model="dialogVisible" size="50%" class="custom-dialog" @close="closeDialog(menuFormRef)">
    <template #title>
      <div class="flex items-center">
        <el-icon :size="20" color="var(--el-color-primary)" class="font-extrabold">
          <Memo />
        </el-icon>
        <span class="ml-2">{{ dialogTitle }}</span>
      </div>
    </template>
    <el-form ref="menuFormRef" :model="formData" :rules="rules" :label-width="formLabelWidth">
      <el-form-item label="类型" prop="menuType">
        <el-radio-group v-model="formData.menuType" :disabled="!!formData.id">
          <el-radio-button v-for="(item, key) in menuTypeDict" :key="key" :label="item" :value="+key" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentId">
        <el-tree-select
          v-model="formData.parentId"
          :data="menuTreeData"
          placeholder="请选择上级菜单"
          check-strictly
          :render-after-expand="false"
          :props="{ value: 'id', label: 'name', children: 'children' }"
          clearable
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <template #label>
          <span>{{ editLabelName() }}名称</span>
        </template>
        <el-input v-model="formData.name" clearable></el-input>
      </el-form-item>
      <el-form-item prop="path" v-if="[0, 1].includes(formData.menuType)">
        <template #label>
          <span class="flex items-center">
            路由地址
            <el-tooltip effect="light" content="route.path" placement="top-start">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-input v-model="formData.path" clearable></el-input>
      </el-form-item>
      <el-form-item label="" prop="component" v-if="[1].includes(formData.menuType)">
        <template #label>
          <span class="flex items-center">
            组件路径
            <el-tooltip effect="light" content="route.component" placement="top-start">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-input v-model="formData.component" clearable></el-input>
      </el-form-item>
      <el-form-item label="组件名称" prop="enName" v-if="[1].includes(formData.menuType)">
        <template #label>
          <span class="flex items-center">
            组件名称
            <el-tooltip effect="light" content="route.name" placement="top-start">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-input v-model="formData.enName" clearable placeholder="请输入组件英文名称"></el-input>
      </el-form-item>
      <el-form-item label="权限标识" prop="permission" v-if="[2, 1].includes(formData.menuType)">
        <el-input v-model="formData.permission" clearable></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon" v-if="[0, 1].includes(formData.menuType)">
        <template #label>
          <span>{{ editLabelName() }}图标</span>
        </template>
        <select-icon v-model="formData.icon"></select-icon>
      </el-form-item>
      <el-form-item label="显示排序" prop="sortOrder">
        <el-input-number style="width: 100%" v-model="formData.sortOrder" :min="0" controls-position="right">
          <template #decrease-icon>
            <el-icon>
              <Minus />
            </el-icon>
          </template>
          <template #increase-icon>
            <el-icon>
              <Plus />
            </el-icon>
          </template>
        </el-input-number>
      </el-form-item>
      <template v-if="[0, 1].includes(formData.menuType)">
        <div class="flex justify-between flex-wrap">
          <el-form-item label="是否缓存" prop="isKeepAlive">
            <el-switch v-model="formData.isKeepAlive" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item label="是否隐藏" prop="isHide">
            <el-switch v-model="formData.isHide" inline-prompt active-text="隐藏" inactive-text="展示"></el-switch>
          </el-form-item>
          <el-form-item label="是否外链" prop="isIframe">
            <el-switch v-model="formData.isIframe" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </div>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog(menuFormRef)"> 取消</el-button>
      <el-button type="primary" @click="handleSave(menuFormRef)"> 保存</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="MenuAdd">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { createMenu, getMenuTreeList, updateMenu } from "@/api/modules/menu";
import { getDictDataListByType } from "@/api/modules/dict";
import { Menu } from "@/typings/global";

const emits = defineEmits(["close"]);
const formLabelWidth = "100px";
const dialogTitle = ref("新增菜单");
const dialogVisible = ref(false);
const menuFormRef = ref<FormInstance>();
let formData = reactive<Menu.IMenu>({
  menuType: 0,
  parentId: -1,
  name: "",
  path: "",
  sortOrder: 999,
  icon: "icon-kuaizhuangshitu-copy",
  isKeepAlive: false,
  isHide: false,
  isIframe: false,
  permission: "",
  component: "",
  enName: ""
});

const menuTypeDict = reactive({
  0: "目录",
  1: "菜单",
  2: "按钮"
});

const rules = ref<FormRules>({
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  sortOrder: [{ required: true, message: "请输入显示排序", trigger: "blur" }],
  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
  path: [{ required: true, message: "请输入路由地址", trigger: "blur" }]
});

const menuTreeData = ref([]);

const editLabelName = () => {
  return menuTypeDict[formData.menuType];
};

const openDialog = async (type = "add", data: any = {}) => {
  dialogTitle.value = type === "edit" ? "修改菜单" : "新增菜单";
  formData.parentId = data.parentId || -1;
  if (type === "edit") {
    await nextTick();
    dialogTitle.value = "修改菜单";
    formData.id = data.id;
    formData.menuType = +data.menuType;
    formData.parentId = +data.parentMenuId;
    formData.name = data.name;
    formData.path = data.path;
    formData.sortOrder = data.sortOrder;
    formData.icon = data.icon;
    formData.isKeepAlive = data.keepAlive == "1";
    formData.isHide = data.visible == "1";
    formData.isIframe = data.isIframe == "1";
    formData.permission = data.permission;
    formData.component = data.component;
    formData.enName = data.enName;
  }
  await getAllMenu();
  await getMenuTypeDict();
  dialogVisible.value = true;
};

const getAllMenu = async () => {
  // 获取所有菜单
  const { data } = await getMenuTreeList();
  menuTreeData.value = [
    {
      id: -1,
      name: "根目录",
      children: data
    }
  ] as any;
};

const getMenuTypeDict = async () => {
  const { data } = await getDictDataListByType("system_menu_type");
  console.log(data);
};

const handleSave = (formRef: FormInstance | undefined) => {
  if (!formRef) return;

  formRef.validate(async (valid: boolean) => {
    if (valid) {
      const saveURL = formData.id ? updateMenu : createMenu;
      await saveURL(formData);
      ElMessage.success("保存成功");
      closeDialog(formRef);
    }
  });
  // 保存逻辑
};

const closeDialog = (formRef: FormInstance | undefined) => {
  if (!formRef) return;
  console.log(menuFormRef.value?.resetFields);
  formData.id = undefined;
  formData.name = "";
  formData.path = "";
  formData.sortOrder = 0;
  formData.icon = "icon-kuaizhuangshitu-copy";
  formData.isKeepAlive = false;
  formData.isHide = false;
  formData.isIframe = false;
  formData.permission = "";
  formData.component = "";

  dialogVisible.value = false;
  emits("close");
};
defineExpose({
  openDialog
});
</script>

<style scoped></style>
